<template>
  <div>
    <div class="header">
      <div>
        <i class="iconfont icon-renxiang"></i> 广西
      </div>
      <div>医疗救治定点医院和发热门诊一览</div>
    </div>
    <div class="content">
      <div style="width:120px">
        <el-input placeholder="请输入医院名称"></el-input>
      </div>
<div @click='toMap(item)' class="item" v-for='item in hos.list' :key='item.id'>
                <div class="left">
                    <div>{{item.name}}</div>
                    <div v-if='item.flags'>{{item.flags}}</div>
                    <div v-else>暂无标记...</div>
                    <div v-if='item.address'>{{item.address}}</div>
                    <div v-else>地址不详...</div>
                </div>
                <div class="right">
                    <div><i class="iconfont icon-dingwei-"></i></div>
                    <div>{{ GetDistance(item.latitude,item.longitude) }} KM</div>
                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  computed: {
    ...mapState("hos", ["hos1"])
  },
  data() {
    return {
      obj: {
        page: 1,
        pageSize: 10
      },
      vshow: false,
      newobj: {}
    };
  },
  watch: {
    obj: {
      handler: function() {
        this.findhos(this.obj);
      },
      deep: true
    }
  },
   created() {
        this.findHos(this.obj);
        this.getLocation();
    },
  methods: {
     ...mapActions('hos',['findHos']),
        // 计算距离
        GetDistance(lat1,  lng1){
            var radLat1 = lat1*Math.PI / 180.0;
            var radLat2 = this.lat*Math.PI / 180.0;
            var a = radLat1 - radLat2;
            var  b = lng1*Math.PI / 180.0 - this.lng*Math.PI / 180.0;
            var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
            Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
            s = s *6378.137 ;// EARTH_RADIUS;
            s = Math.round(s * 10000) / 10000;
            return s;
        },
        // 获取当前位置
        getLocation() {
            navigator.geolocation.getCurrentPosition((res)=>{
                this.lat = res.coords.latitude;
                this.lng = res.coords.longitude;
            }, (err)=>{
                console.log(err);
            }, {
                enableHighAccuracy: true, /* 高精度定位 */
                timeout: 5000,
                maximumAge: 0
            });
        },
        // 跳转至疫情地图页面，并携带参数【经纬度】
        toMap(val){
            this.$router.push({
                path:'/hos/detail',
                query:{
                    one:val.latitude,
                    two:val.longitude
                }
            })
        }
    }
};
</script>

<style scoped>
.content .right div:first-child {
  padding-left: 5px;
}
.content .left div:nth-child(3) {
  color: #999;
  font-size: 14px;
}
.content .left div:nth-child(2) {
  background-color: #ffb34e;
  border-radius: 5px;
  display: inline;
  font-size: 12px;
  padding: 5px;
  color: white;
}
.content .left div {
  height: 30px;
  line-height: 30px;
}
.content .right div {
  height: 45px;
  line-height: 45px;
}
.content .item {
  margin-top: 20px;
  border-bottom: 1px solid #ccc;
  height: 120px;
  padding: 0 20px;
}
.content .left {
  float: left;
}
.content .right {
  float: right;
}
.content {
  margin-top: 160px;
}
.header div:last-child {
  top: 55%;
  left: 3%;
}
.header div:first-child {
  top: 25%;
  left: 3%;
}
.header div {
  position: absolute;
  font-size: 20px;
  color: white;
  font-weight: 800;
}
.header {
  height: 150px;
  background-image: url("http://39.96.21.48/2020_znn/visual-ui/static/img/bg1.efce26ef.png");
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
</style>